import { HooksDemos, TagsInputDemos, SliderDemos, RangeSliderDemos, BarChartDemos, DatePickerDemos } from '@docs/demos';
import { Button } from '@mantine/core';
import { IconHeartFilled } from '@tabler/icons-react';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog810);

## Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
All funds are used to improve Mantine and create new features and components.

<SponsorButton />

## DatePicker presets

[DatePicker](/dates/date-picker), [DatePickerInput](/dates/date-picker-input)
and [DateTimePicker](/dates/date-time-picker) now support `presets` prop
that allows you to add custom date presets. Presets are displayed next to the calendar:

<Demo data={DatePickerDemos.presetsRange} />

## Calendar headerControlsOrder

[Calendar](/dates/calendar) and other components based on it now support `headerControlsOrder` prop.
You can use `headerControlsOrder` prop to change the order of header controls. The prop accepts an array of
`'next' | 'previous' | 'level'`. Note that each control can be used only once in the array.

<Demo data={DatePickerDemos.headerControlsOrder} />

## Popover middlewares improvements

[Popover](/core/popover) component now handles `shift` and `flip` Floating UI
differently. Starting from 8.1.0 version, the popover dropdown position is not
changed when the popover is opened. `shift` and `flip` middlewares are used only
once to calculate the initial position of the dropdown.

This change fixes incorrect flipping/shifting behavior when there is dynamic content
in the dropdown. For example, searchable [Select](/core/select) and [DatePickerInput](/dates/date-picker-input)
without `consistentWeeks` option.

Previous behavior:

<Video src="/assets/8-1-0-popover-previous-behavior.mp4" />

New behavior:

<Video src="/assets/8-1-0-popover-new-behavior.mp4" />


## use-long-press hook

New [use-long-press](/hooks/use-long-press) hook:

<Demo data={HooksDemos.useLongPressDemo} />

## Reference area support in charts

[BarChart](/charts/bar-chart), [AreaChart](/charts/area-chart) and [LineChart](/charts/line-chart)
components now support reference area. Reference area is a rectangular area
that can be used to highlight a specific region of the chart:

<Demo data={BarChartDemos.referenceArea} />

## use-form resetField handler

[use-form](/form/use-form) now has a `resetField` method that resets field value to its initial value:

```tsx
import { useForm } from '@mantine/form'

const form  = useForm({ initialValues: { name: 'John Doe' } });

form.resetField('name'); // resets name field to 'John Doe'
```

## TagsInput isDuplicate prop

You can now use `isDuplicate` prop in [TagsInput](/core/tags-input) component
to control how duplicates are detected. It is a function that receives two arguments:
tag value and current tags. The function must return `true` if the value is duplicate.

Example of using `isDuplicate` to allow using the same value with different casing:

<Demo data={TagsInputDemos.isDuplicate} />

## Slider domain prop

[Slider](/core/slider) component now supports `domain` prop that allows
setting the possible range of values independently of the `min` and `max` values:

<Demo data={SliderDemos.domain} />

## RangeSlider pushOnOverlap prop

[RangeSlider](/core/range-slider) component now supports `pushOnOverlap` prop that defines
whether the slider should push the overlapping thumb when the user drags it.

<Demo data={RangeSliderDemos.pushOnOverlap} />

## Hooks types exports

`@mantine/hooks` package now exports all types used in hooks options and return values.
For example, you can now import [use-uncontrolled](/hooks/use-uncontrolled) types like this:

```tsx
import type { UseUncontrolledOptions, UseUncontrolledReturnValue } from '@mantine/hooks';
```

Types exported from the library:

```tsx
interface UseUncontrolledOptions<T> {
  /** Value for controlled state */
  value?: T;

  /** Initial value for uncontrolled state */
  defaultValue?: T;

  /** Final value for uncontrolled state when value and defaultValue are not provided */
  finalValue?: T;

  /** Controlled state onChange handler */
  onChange?: (value: T) => void;
}

type UseUncontrolledReturnValue<T> = [
  /** Current value */
  T,

  /** Handler to update the state, passes `value` and `payload` to `onChange` */
  (value: T, ...payload: any[]) => void,

  /** True if the state is controlled, false if uncontrolled */
  boolean,
];
```

## zod v4 with use-form

You can now use zod v4 with [use-form](/form/use-form). To use zod 4:
- Update `mantine-form-zod-resolver` to `1.2.1` or later version
- Update zod to version `3.25.0` or later
- Replace `zod` imports with `zod/v4` (only if you have `zod@3` in your `package.json`)
- Replace `zodResolver` with `zod4Resolver` in your code
- All other code remains the same

Example with zod v4:

```tsx
import { z } from 'zod/v4';
import { zod4Resolver } from 'mantine-form-zod-resolver';

const schema = z.object({
  name: z.string().min(2, { message: 'Name should have at least 2 letters' }),
  email: z.email({ message: 'Invalid email' }),
  age: z.number().min(18, { message: 'You must be at least 18 to create an account' }),
});

const form = useForm({
  initialValues: {
    name: '',
    email: '',
    age: 16,
  },
  validate: zod4Resolver(schema),
})
```

## Documentation updates

- [use-debounced-callback](/hooks/use-debounced-callback) documentation was updated to include new `flush` and `flushOnUnmount` features
- Documentation about exported types was added to all applicable hooks

## Other changes

- All components now support `bdrs` style prop to set border radius.
- [DateTimePicker](/dates/date-time-picker) now supports `defaultTimeValue` prop
- [Tooltip](/core/tooltip) now supports `autoContrast` prop.
- Handlers returned from [use-counter](/hooks/use-counter) are now memoized.
- Return value of [use-event-listener](/hooks/use-event-listener), [use-focus-within](/hooks/use-focus-within), [use-focus-trap](/hooks/use-focus-trap), [use-hover](/hooks/use-hover), [use-move](/hooks/use-move), [use-radial-move](/hooks/use-radial-move) changed (`React.RefObject` -> `React.RefCallback`), required to fix incorrect ref handling in several cases. For more information, see the issue on GitHub – [#7406](https://github.com/mantinedev/mantine/issues/7406).
- Deprecated `React.MutableRefObject` type was replaced with `React.RefObject` in all packages to better support React 19 types.
- `positionDependencies` prop is now deprecated in [Tooltip](/core/tooltip), [Popover](/core/popover) and other components based on Popover. The prop is no longer required and can be safely removed. `positionDependencies` prop will be removed in 9.0 release.
